<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line-height</title>
</head>
<body>
  <h1>line-height 指行的 基线之间的距离</h1>
  <h2>改变line-height 也会改变行距</h2>
  <h3>行距 =  line-height - font-size</h3>

  <div id="d1">
    <h1>I am Title</h1>
    <p>Phasellus efficitur posuere libero porttitor venenatis. Sed nec lectus mi. Aenean sodales mollis ligula, sed gravida mi fermentum at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet mi vel ipsum efficitur, non volutpat nisl condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ut justo sed purus venenatis ullamcorper. Donec faucibus, metus ac faucibus lobortis, nisi erat lobortis augue, sit amet rutrum nibh ex eget massa. Vestibulum dapibus quam ac facilisis mattis. Aliquam erat volutpat. Fusce congue massa nisi, quis vehicula mauris ullamcorper id. Donec luctus venenatis est, non malesuada leo molestie commodo. Maecenas nec libero at quam tempus tempor. Duis pulvinar vel erat quis eleifend. Integer nisi arcu, rhoncus ac ligula et, pharetra aliquam enim.</p>
  </div>

  <div id="d2">
    <h1>I am Title</h1>
    <p>Phasellus efficitur posuere libero porttitor venenatis.</p>
  </div>
</body>
<style>
  /* 行距为0 */
  #d1 {
    font-size: 20px;
    line-height: 20px;
  }

  /* 行距为 -30px */
  #d1 h1 {
    font-size: 50px;
    color: brown;
  }

  #d2 {
    line-height: 0;
    height: 500px;
  }
</style>
</html>